<template>
  <div>
<!--    <a-modal title="新增问卷" :width="900" :visible="visible" @ok="submit"  @cancel="visible =false">-->
      <a-modal title="新增问卷" :width="900" :visible="visible" @ok="submit"  @cancel="cancel">
      <div class="student-modal-container">
        <a-form
          :form="form"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          style="overflow: scroll; height: 700px"
        >
          <a-row>
            <a-col :span="20">
              <a-form-item label="问卷名称">
                <a-input
                  placeholder="请输入内容"
                  v-model="formData.name"
                  v-decorator="['name', { rules: validateRules.name, initialValue: formData.name }]"
                  style="width: 80%; margin-right: 8px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="类型">
                <el-select v-model="formData.type" placeholder="请选择类别">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.details"
                    :value="item.id">
                  </el-option>
                </el-select>
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="填写份数">
                <a-input
                  placeholder="请输入内容"
                  v-model="formData.sum"
                  v-decorator="['sum', { rules: validateRules.sum, initialValue: formData.sum }]"
                  style="width: 80%; margin-right: 8px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="费用">
                <a-input
                  placeholder="请输入内容"
                  v-model="formData.price"
                  v-decorator="['price', { rules: validateRules.price, initialValue: formData.price }]"
                  style="width: 80%; margin-right: 8px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="上级费用">
                <a-input
                  placeholder="请输入内容"
                  v-model="formData.onePrice"
                  v-decorator="['onePrice', { rules: validateRules.onePrice, initialValue: formData.onePrice }]"
                  style="width: 80%; margin-right: 8px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="上上级费用">
                <a-input
                  placeholder="请输入内容"
                  v-model="formData.twoPrice"
                  v-decorator="['twoPrice', { rules: validateRules.twoPrice, initialValue: formData.twoPrice }]"
                  style="width: 80%; margin-right: 8px"
                />
              </a-form-item>
            </a-col>
                     <a-col :span="20">
              <a-form-item label="截止时间">
                            <a-date-picker
        format="YYYY-MM-DD"
        @change="getTime"
        placeholder="选择时间"
        style="width: 80%;"
      />
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="是否为甄别问卷">


                <el-switch
                  v-model="formData.other"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
<!--                <a-select-->
<!--                  style="width: 80%; margin-right: 8px"-->
<!--                  v-model="formData.other"-->
<!--                  :disabled="type === 'view'"-->
<!--                  v-decorator="['other', { rules: validateRules.other, initialValue: formData.other }]"-->
<!--                  placeholder="请选择"-->
<!--                >-->
<!--                  <a-select-option v-for="item in testList" :key="item.value" :value="item.value">-->
<!--                    {{ item.label }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
              </a-form-item>
            </a-col>
            <a-col :span="20" v-if="+formData.other == 1">
              <a-form-item label="甄别问卷"> </a-form-item>
            </a-col>
          </a-row>
          <div v-if="formData.other == 1">
            <a-row v-for="(item, index) in formData.screenDetails" :key="index">
              <a-col :span="20">

                <a-form-item :label="'甄别题目' + (index + 1) + '名称'">
                  <a-input placeholder="请输入内容" v-model="item.title" style="width: 80%; margin-right: 8px" />

                  <a-button type="minus-circle"  @click="addOptions(index)">
                    增加选项
                  </a-button>
                  <!-- 删除甄别题目按钮-->
                  <template v-if="formData.screenDetails.length > 1">
                    <a-icon type="minus-circle" class="dynamic-delete-button" @click="removeRow(item)" />
                  </template>
                </a-form-item>
                <a-form-item v-for="(items, indexs) in item.questTitle" :label="items.label" :key="indexs">
                  <a-input placeholder="请输入内容" v-model="items.value" style="width: 80%; margin-right: 8px" />
                  <template v-if="formData.screenDetails.length > 1"> </template>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-for="(item, index) in formData.screenDetails" :key="index">
              <a-col :span="20">
                <a-form-item :label="'题目' + (index + 1) + '答案'">
                  <a-radio-group v-model="item.answer" v-for="(items, indexs) in item.choiceAnswers">
                    <a-radio :value=items.label name="type"> {{items.label}} </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="20">
                <a-form-item v-bind="formItemLayoutWithOutLabel">
                  <a-button type="dashed" style="width: 60%" @click="addRow">
                    <a-icon type="plus-circle" />
                  </a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
                 <a-col :span="20" >
              <a-form-item label="问卷"> </a-form-item>
            </a-col>
                <div >
            <a-row v-for="(item, index) in formData.questionnaireDetails" :key="index">
              <a-col :span="20">
                <a-form-item :label="'题目' + (index + 1) + '名称'">
                  <a-input placeholder="请输入内容" v-model="item.title" style="width: 80%; margin-right: 8px" />
                  <template v-if="formData.questionnaireDetails.length > 1">
                    <a-icon type="minus-circle" class="dynamic-delete-button" @click="removeRows(item)" />
                  </template>
                </a-form-item>
                        <a-form-item :label="'题目' + (index + 1) + '类型'">
                           <a-select
                  style="width: 80%; margin-right: 8px"
                  v-model="item.answerMethod"
                  placeholder="请选择"
                >
                 <a-select-option v-for="item in selectOptions" :key="item.code" :value="item.code">
                   {{ item.value }}
                 </a-select-option>
                </a-select>
                  <template v-if="formData.questionnaireDetails.length > 1">
                    <a-icon type="minus-circle" class="dynamic-delete-button" @click="removeRow(item)" />
                  </template>
                </a-form-item>
                  <div v-if="+item.answerMethod === 0">
                <a-form-item v-for="(items, indexs) in item.answer" :label="items.label" :key="indexs">

                  <a-input placeholder="请输入内容" v-model="items.value" style="width: 80%; margin-right: 8px" />

                   <a-button type="minus-circle"  @click="addOptions1(index)">
                     增加选项
                   </a-button>

                  <template v-if="formData.questionnaireDetails.length > 1"> </template>
                </a-form-item>
                  </div>

              </a-col>
            </a-row>
            <a-row>
              <a-col :span="20">
                <a-form-item v-bind="formItemLayoutWithOutLabel">
                  <a-button type="dashed" style="width: 60%" @click="addRows">
                    <a-icon type="plus-circle" />
                  </a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
import {categoryList} from "@/api/modular/main/category/categoryExport";

let id = 0
  import { questionnaireAdd } from '@/api/modular/main/questionnaire/questionnaireManage'
import { Select, Form, Input, Row, Col, Button, Icon } from 'ant-design-vue'
import {sysDictDataList} from "@/api/modular/system/dictDataManage";
const ASelectOption = Select.Option
const AFormItem = Form.Item
const PARTONE = 'partOne'
export default {
  name: 'EditForm',
  components: {
    ASelect: Select,
    ASelectOption,
    AForm: Form,
    AFormItem,
    AInput: Input,
    ARow: Row,
    ACol: Col,
    ATextarea: Input.TextArea,
    AButton: Button,
    AIcon: Icon,
  },
  data: function () {
    return {
      optionConstant:{0:'A',1:'B',2:'C',3:'D',4:'E',5:'F',6:'G',7:'H'},
      id: 0,

      validateRules: {
        category: [{ required: this.type !== 'view', message: '消息不能为空' }],
        names: [{ required: this.type !== 'view', message: '内容不能为空' }],
        messCategory: [{ required: this.type !== 'view', message: '消息不能为空' }],
      },
      options: [],
      selectOptions:[],
      testList: [
        { value: '0', label: '否' },
        { value: '1', label: '是' },
      ],
      messOptions: [{ value: '22', label: '22' }],

      // 数据
      formData: {
        expirationDate: '2021-12-05',
        filledSum: 0,
        inSell: 0,
        name: '',
        onePrice: 0,
        other: 0,
        price: 0,
        questionnaireDetails: [
          {
            answerMethod: '1',
            title: '',
            answer:[
              { label: 'A', value: '' },
            ]
          },
        ],
        screenDetails: [
          {
            answer:'',
            choiceAnswers: [
              { label: 'A', value: '' },
            ],
            answerMethod: 0,
            questTitle: [
              { label: 'A', value: '' },
            ],
            title: '',
          },
        ],
        status: 0,
        sum: 0,
        twoPrice: 0,
        type: '',
        upShelf: 1,
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 },
        },
      },

      form: this.$form.createForm(this),
      arr: [],
      visible: false,
    }
  },

  created() {
    this.form = this.$form.createForm(this, { name: 'StudentEditForm' })

    categoryList().then((res)=>{
      this.options=res.data
    })

    sysDictDataList({'typeId':'1476371624555491329'}).then((res)=>{
      this.selectOptions=res.data
      console.log(this.selectOptions)
    })
  },

  props: {

    type: {
      type: String,
      default: 'create',
    },
    title: {
      type: String,
      default: '',
    },
    wrapHeight: {
      // 表单容器的高度
      type: Number,
      default: 120,
    },
    // arr: {
    //   type: Array,
    //   default: function () {
    //     return []
    //   }
    // }
  },

  methods: {

    addOptions(i){
      var index = this.formData.screenDetails[i].questTitle.length
      let option = this.optionConstant[index]
      this.formData.screenDetails[i].questTitle.push({ label: option, value: '' })
      this.formData.screenDetails[i].choiceAnswers.push({ label: option, value: '' })
    },
    addOptions1(i){
      var index = this.formData.questionnaireDetails[i].answer.length
      let option = this.optionConstant[index]
      this.formData.questionnaireDetails[i].answer.push({ label: option, value: '' })
    },
      getTime(data,time){
console.log(data,time)
this.formData.expirationDate = time
      },
    add(record) {
      this.visible = true
    },
    cancel(){
      this.visible =false
    },
    handleCancel() {
      this.$emit('on-cancel')
    },
    handleConfirm(type) {
      this.$emit('on-confirm', type, this.data)
    },
    //   init () {
    //     const arr = []
    //     if (this.formData.arr !== undefined){
    //       this.arr = this.formData.arr
    //     }
    //     if (this.arr.length !== 0) {
    //       for (let i = 0; i < (this.formData.arr).length-1; i++) {
    //         arr.push(i)
    //         this.id = this.id + 1
    //       }
    //     }
    //     else{
    //       arr.push(0)
    //       this.id = this.id + 1
    //     }
    //   this.keysList = arr
    // },
    // 移除某行
    removeRow(k) {
      if (this.formData.screenDetails.length === 1) {
        // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
        return
      }
      this.formData.screenDetails = this.formData.screenDetails.filter((item) => item !== k)
    },
        removeRows(k) {
      if (this.formData.questionnaireDetails.length === 1) {
        // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
        return
      }
      this.formData.questionnaireDetails = this.formData.questionnaireDetails.filter((item) => item !== k)
    },
    // 新增一题甄别题
    addRow() {
      let data = {
        choiceAnswers: [
          { label: 'A', value: '' },
        ],
        answer: '',
        answerMethod: 0,
        questTitle: [
          { label: 'A', value: '' },
        ],
        title: '',
      }
      //   this.id = this.id + 1
      this.formData.screenDetails = this.formData.screenDetails.concat(data)
    },
    //新增一题正式题
    addRows(){
         let data =          {
            answerMethod: '1',
            title: '',
           answer:[
              { label: 'A', value: '' },
            ]
          }
      //   this.id = this.id + 1
      console.log(this.formData.questionnaireDetails)
      this.formData.questionnaireDetails = this.formData.questionnaireDetails.concat(data)
      console.log(this.formData, '88888')
    },
    submit(){

       this.formData.other=this.formData.other?1:0;
        if(this.formData.name && this.formData.questionnaireDetails.length &&this.formData.type){
            let params = {...this.formData}
            // params.questionnaireDetails = params.questionnaireDetails.toString()
          console.log(params.screenDetails.questTitle)
          if(params.screenDetails.length){
            for(let i = 0 ; i < params.screenDetails.length;i++){
              params.screenDetails[i].questTitle = JSON.stringify(params.screenDetails[i].questTitle)
            }
            for(let i = 0 ; i < params.questionnaireDetails.length;i++){
              params.questionnaireDetails[i].answer = JSON.stringify(params.questionnaireDetails[i].answer)
            }
          }
            console.log(params)
        questionnaireAdd(params).then((res) => {
              if (res.success) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.visible = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('新增失败')// + res.message
                this.visible = false
              }
            }).finally((res) => {
            })
          }else {
          this.$message.error('请填写完整')
        }




    }
  },
}
</script>
<style lang="less" scoped>
.student-modal-container {
  .ant-form {
    .ant-input-disabled,
    .ant-select-disabled {
      background: none;
      border: none;
      color: rgba(0, 0, 0, 0.65);
      font-weight: 700;
      cursor: auto;
      /deep/ .ant-select-selection {
        background: none;
        border: none;
        cursor: auto;
        .ant-select-arrow {
          display: none;
        }
      }
    }
  }

  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}
.dynamic-wrap {
  padding-top: 10px;
  background-color: white;
  overflow-y: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 7px;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}
.minusRowBtn {
  color: #f5222d;
  background: #fff1f0;
  border-color: #ffa39e;
  padding-right: 7px;
  padding-left: 7px;
  height: 29px;
  margin-left: 10px;
}
.addRowBtn {
  width: 70%;
  color: #1890ff;
  border-color: #91d5ff;
  margin: 0px 0px 20px 70px;
}
</style>
